<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>职位列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/new_layui/css/layui.css" media="all">
    <style>
        /*子页面样式*/
        .childrenBody{ margin:10px 10px 0; }
        .layui-table td, .layui-table th{ word-break:break-all; }
        ::selection{background:#ff5722; color:#fff;} /*文字选中背景色*/
        ul li{
            line-height: 26px;
            margin-top: 5px;
            color: #61687c;
            font-size: 14px;
        }
        .description_layer{
            padding: 20px;
            background: rgba(244,247,252,.9);
            font-family: "微软雅黑 Light";
        }
    </style>
</head>
<body class="childrenBody">
    <blockquote class="layui-elem-quote news_search">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" value="" placeholder="请输入关键字" class="layui-input search_input">
            </div>
            <a class="layui-btn search_btn">查询</a>
        </div>
        <div class="layui-inline">
            <a class="layui-btn layui-btn-normal newsAdd_btn">城区</a>
        </div>
        <div class="layui-inline">
            <a class="layui-btn recommend" style="background-color:#5FB878">薪资</a>
        </div>
        <div class="layui-inline">
            <a class="layui-btn audit_btn">公司</a>
        </div>
        <div class="layui-inline">
            <a class="layui-btn layui-btn-danger batchDel">职位</a>
        </div>
    </blockquote>
    <table id="jobList" lay-filter="test"></table>
    <script src="/new_layui/layui.js"></script>
    <script>
        layui.use(['table','jquery','layer'], function(){
            var table = layui.table, $=layui.jquery,layer=layui.layer;
            //第一个实例
            table.render({
                elem: '#jobList'
                ,height: 500
                ,url: '/php/public/api/Boss/jobList.html' //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'id', title: 'ID', width:40, sort: true, fixed: 'left'}
                    ,{field: 'name', title: '名称', width:150, templet: '#jobnameTpl'}
                    ,{field: 'salary_low', title: '薪资(from)/k', width:60, templet: '#salary_lowTpl', sort: true}
                    ,{field: 'salary_high', title: '薪资(to)/k', width:60, templet: '#salary_highTpl',sort:true}
                    ,{field: 'work_experience', title: '经验', width: 80, sort:true}
                    ,{field: 'education', title: '学历', width: 80, sort: true}
                    ,{field: 'tags', title: '标签', width: 200}
                    ,{field: 'area', title: '城区', width: 80, sort: true}
                    ,{field: 'company', title: '公司', width: 120, templet: '#companyRowTpl'}
                    ,{field: 'publish_time', title: '发布时间', width: 160, sort: true}
                    ,{field: 'description', title: '介绍', width: 200,templet: '#descriptionTpl'}
                ]]
                ,done: function (res, curr, count) {
                    $('.company_name').on('click',function () {
                       window.parent.addTab($(this));
                    });
                    var timer;
                    $('.description').on({
                            'mouseenter':function () {
                                var _this = $(this);
                                var p = _this.parent().parent().parent().parent().children();
                                var c = _this.parent().parent().parent();
                                var index = p.index(c);
                                timer=setInterval(function () {
                                            var p = _this.parent().parent().parent().parent().children();
                                            var c = _this.parent().parent().parent();
                                            var index = p.index(c);
                                            var description = res.data[index].description;
                                            var job_name = res.data[index].name;
                                            var tags = res.data[index].tags;
                                            var salary_low = res.data[index].salary_low;
                                            var salary_high = res.data[index].salary_high;
                                            description = description.split(';');
                                            tags = tags.split(';');
                                            var description_html = '<div class="description_layer">';
                                            description_html += '<p>职位名称:</p>';
                                            description_html += '<h3 style="color: red">' + job_name + '</h3>';
                                            description_html += '<hr class="layui-bg-cyan">';
                                            description_html += '<p>技能标签：</p>';
                                            description_html += '<p>';
                                            $.each(tags, function (index, value) {
                                                description_html += '<button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">' + value + '</button>';
                                            });
                                            description_html += '</p>';
                                            description_html += '<hr class="layui-bg-green">';
                                            description_html += '<p>薪资范围:</p>';
                                            description_html += '<button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal">' + salary_low + 'k - ' + salary_high + 'k</button>';
                                            description_html += '<hr class="layui-bg-red">';
                                            description_html += '<ul>';
                                            $.each(description, function (index, value) {
                                                description_html += '<li>' + value + '</li>';
                                            });
                                            description_html += '</ul></div>';
                                            layer.open({
                                                type: 1,
                                                skin: 'layui-layer-molv',
                                                area: ['800px', '450px'],
                                                shadeClose: true, //点击遮罩关闭
                                                content: description_html
                                            });
                                    clearInterval(timer);
                                },500);
                            },
                    'mouseleave':function () {
                        clearInterval(timer);
                        //console.log('鼠标离开')
                        //$('.layui-layer-ico.layui-layer-close.layui-layer-close1').click();
                    }
                    });
                }
            });
        });
    </script>
    <script type="text/html" id="companyRowTpl">
        <a href="javascript:void(0)" style="color: #ff6662;" title="点击查看{{d.company}}详情" data-url="page/boss/singleCompany.html?name={{d.company}}" class="company_name">
            <i class="layui-icon" data-icon=""></i>
            <cite>{{d.company}}</cite>
        </a>
    </script>
    <script type="text/html" id="salary_lowTpl">
        <span style="color: #fd5f39;font-size: 16px">{{d.salary_low}}k</span>
    </script>
    <script type="text/html" id="salary_highTpl">
        <span style="color: #fd5f39;font-size: 16px">{{d.salary_high}}k</span>
    </script>
    <script type="text/html" id="jobnameTpl">
        <span class="job_name">{{d.name}}</span>
    </script>
    <script type="text/html" id="descriptionTpl">
        <p class="description">{{d.description}}</p>
    </script>

    <script type="text/javascript" src="/js/haha.js"></script>
</body>
</html>